<template>
	<view class="flex align-center justify-center mt-5 px-5">
		<view class="flex-1 flex align-center justify-center"
		v-for="(item,index) in providerList" :key="index">
			<view :class="item.icon + ' '+item.bgColor" class="iconfont font-lg text-white flex align-center justify-center rounded-circle" style="width: 100rpx;height: 100rpx;"
			@click="otherLogin(item)"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				providerList: []
			}
		},
		methods:{
			otherLogin(item) {
				uni.login({
					provider:item.id,
					success: (res) => {
						/*
						{
							"authResult": {
								"access_token": "52_5_b9_-PJcrEgLslRUvWikWTqQuIhNHUwVdDItSHQPzsxTnEQEudsebDwju88W8HsibnKmMZBKUBPxioJ1lq-Vunxn3kKh37WI8IC4VmSFWs",
								"expires_in": 7200,
								"refresh_token": "52_3efKI-e2ylu14ut3HdRDEG9No5HmXs2x2RWQB-HnOzAECy4QzfdD5fUZsd9TINUFrOCmuffxa7mSvWkbY40K_djmaCIBxIXfqQqCWHyXnyU",
								"openid": "oRrdQt20OlhXIBA0dfyqSrIQUIHc",
								"scope": "snsapi_userinfo",
								"unionid": "oU5Yyt0Co9U_jA3WkciW61quNiu8"
							},
							"errMsg": "login:ok"
						}
						*/
						// 获取用户信息
					    uni.getUserInfo({
						  provider: item.id,
						  success: (infoRes) => {
							  let obj = {
								  provider: item.id,
								  openid: infoRes.userInfo.openId,
								  expires_in: 0,
								  nickName: infoRes.userInfo.nickName,
								  avatarUrl: infoRes.userInfo.avatarUrl
							  }
							  this.loginEvent(obj)
						   /*
						   {
						   	"errMsg": "getUserInfo:ok",
						   	"userInfo": {
						   		"openId": "oRrdQt20OlhXIBA0dfyqSrIQUIHc",
						   		"nickName": "Sunshine",
						   		"gender": 0,
						   		"city": "",
						   		"province": "",
						   		"country": "",
						   		"avatarUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJQFgcllMics29DHibicu7CP16fMIKJHVGA7LjicibUsQRu8aXFk7AgmwvhYmoibicUv4iae3YUR8wXPmZHRw/132",
						   		"unionId": "oU5Yyt0Co9U_jA3WkciW61quNiu8"
						   	}
						   }
						   */
						  },
						  fail: () => {
						  	uni.showToast({
						  		title:'登陆失败',
								icon:'none'
						  	})
						  }
					    });
					}
				})
			},
			loginEvent(data) {
				this.$H.post('/user/otherlogin', data).then(res => {
					console.log(res)
					/*
					{
						"id": 651,
						"type": "weixin",
						"openid": "oRrdQt20OlhXIBA0dfyqSrIQUIHc",
						"user_id": 0,
						"nickname": "Sunshine",
						"avatarurl": "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJQFgcllMics29DHibicu7CP16fMIKJHVGA7LjicibUsQRu8aXFk7AgmwvhYmoibicUv4iae3YUR8wXPmZHRw/132",
						"logintype": "weixin",
						"token": "8230be7b35beb894f0d96ce3a0fcdd5e319275a5"
					}
					*/
				})
			}
		},
		mounted(){
			uni.getProvider({
				service: 'oauth',
				success: (result) => {
					this.providerList = result.provider.map((value) => {
						let providerName = '';
						let icon = ''
						let bgColor = ''
						switch (value) {
							case 'weixin':
								providerName = '微信登录'
								icon = 'icon-weixin'
								bgColor = 'bg-success'
								break;
							case 'qq':
								providerName = 'QQ登录'
								icon = 'icon-QQ'
								bgColor = 'bg-primary'
								break;
							case 'sinaweibo':
								providerName = '新浪微博登录'
								icon = 'icon-xinlangweibo'
								bgColor = 'bg-warning'
								break;
						}
						return {
							name: providerName,
							id: value,
							icon:icon,
							bgColor:bgColor
						}
					});
					this.providerList.splice(0,1)
					this.providerList.splice(3,2)
				},
				fail: (error) => {
					console.log('获取登录通道失败', error);
				}
			});
		},
	}
</script>

<style>
</style>
